<template>
  <!-- 注意：页面/组件为根标签建议添加一个类名，且该类名最好为页面/组件的名称 -->
  <div class="login-view">
    <div class="login_form">
      <!-- v-pre:跳过vue语法的编译，直接显示全内容 -->
      <div class="login_form_header" v-pre>
        <img src="@/assets/img/z-mall-logo@2x.png" />
        <h3>ZMALL商城管理系统</h3>
      </div>
      <el-form :model="form" :rules="rules" ref="form" l>
        <el-form-item prop="username">
          <el-input
            clearable
            placeholder="请输入账号"
            v-model="form.username"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item porp="password">
          <el-input
            clearable
            placeholder="请输入密码"
            show-password
            v-model="form.password"
          >
            <!-- 插槽的写法 -->
            <!-- 属性与插槽的区别：如果使用属性添加图标，只能使用element-ui中已经封装好的图标，使用插槽的形式，。可以使用其他框架中的图标，如阿里巴巴矢量图 -->
            <template v-slot:prefix>
              <i class="el-input__icon el-icon-lock"></i>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <div class="login_form_remember">
        <!-- `checked` 为 true 或 false -->
        <el-checkbox v-model="form.remember">记住密码</el-checkbox>
        <el-link>注册账号</el-link>
      </div>
      <div class="login_form_login">
        <el-button @click="onClick" :loading="flag">登陆</el-button>
        <!-- <el-button @click="onLogout">退出登陆</el-button> -->
      </div>
    </div>
  </div>
</template>

<script>
// import { login, logout } from "@/api";
// import { set } from "@/utils/store";
import { mapActions } from "vuex";
export default {
  //为了后期调试，为该页面/组件添加一个name属性，name属性的值就是该文件的名称
  name: "LoginView",
  // 递归 不难  难在找出口
  data() {
    return {
      form: {
        username: "",
        password: "",
        remember: false,
      },
      flag: false,
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    ...mapActions("user", ["login"]),
    async onClick() {
      try {
        this.flag = true; // 登录按钮转圈圈判断条件
        await this.login(this.form);
        this.$message.success("登陆成功");
        this.$router.push("/");
      } catch (err) {
        console.log(err);
        return Promise.reject(err);
      }
      /*
      // 请求登陆接口
      // login(this.form)
      //   .then((res) => {
      //     console.log(res.data);
      //   })
      //   .catch((err) => console.log(err));
      */
      /*
      try {
        let { data } = await login(this.form); // {statu, data}
        console.log(data);
        this.$message.success("登陆成功");
        // localStorage.setItem("mall", data.token);
        set("zmall", data.token);

        // 登陆成功后，跳转至首页
      } catch (err) {
        console.log(err);
      }
      */
    },
    async onLogout() {
      // try {
      //   console.log(await logout());
      // } catch (err) {
      //   console.log(err);
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
/* 局部样式 */
.login-view {
  width: 100vw;
  height: 100vh;
  /* background-image: url(../../assets/img/login-bg.png); */
  /* css中可以使用绝对路径，@ -> src PS:如果直接写@返回错误，在@前面添加一个～ */
  background-image: url(~@/assets/img/login-bg.png);
  background-size: cover;
  background-position: center;
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  .login_form {
    width: 370px;
    height: 352px;
    background-color: rgba($color: #ffffff, $alpha: 0.4);
    /*-moz-animation-duration: ;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      */
    /* 定位+transfrom */
    border-radius: 5px;

    &_header {
      width: 100%;
      height: 92px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .el-input,
    .el-button {
      width: 319px;
      height: 42px;
      margin-left: 25px;
    }

    &_remember {
      display: flex;
      justify-content: space-between;
    }
    .el-checkbox {
      margin-left: 25px;
    }
    .el-link {
      color: #ffffff;
      margin-right: 28px;
    }
    .el-button {
      background-color: #f56c6c;
      color: #ffffff;
      border: none;
      margin-top: 30px;
    }
  }
}

img {
  width: 38px;
  height: 38px;
}

h3 {
  color: #fafff8;
  margin-left: 7px;
}
</style>
